<template>
  <div class="page">
    <el-form :model="dataForm" :rules="rules" ref="dataForm" label-position="right" label-width="auto" class="demo-dataForm" :disabled="dataFormEdit">
      <!--订单发货基本信息-->
      <div class="deliveryDetails">
        <!--上方栏-->
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="销售商家" prop="merchantName" >
                <el-input v-model="dataForm.merchantName " ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发货仓库" prop="region4" >
                <el-select v-model="dataForm.region4" placeholder="全部" >
                  <el-option label="仓库一" value="仓库一" ></el-option>
                  <el-option label="仓库二" value="仓库二" ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="交货单号" prop="deliverNo" >
                <el-input v-model="dataForm.deliverNo "></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="交货单创建时间" >
                <el-form-item prop="startBuyTime">
                  <el-date-picker v-model="dataForm.startBuyTime" type="datetime" placeholder="开始" ></el-date-picker>
                </el-form-item>
                <span class="dater">-</span>
                <el-form-item prop="endBuyTime">
                  <el-date-picker v-model="dataForm.endBuyTime" type="datetime" placeholder="结束" ></el-date-picker>
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销售店铺名称" prop="storeName" >
                <el-input v-model="dataForm.storeName "></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="配送方式" prop="deliveryType" >
                <el-select v-model="dataForm.deliveryType" placeholder="全部"   >
                  <el-option v-for="item in mOrderDeliveryTypeOption" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="商品编码" prop="goodsId" >
                <el-input v-model="dataForm.goodsId"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="条码" prop="temp" >
                <el-input v-model="dataForm.temp"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="货号" prop="temp" >
                <el-input v-model="dataForm.temp"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="订单编号" prop="orderNo" >
                <el-input v-model="dataForm.orderNo"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="订单类型" prop="deliverWay" >
                <el-select v-model="dataForm.deliverWay" >
                  <el-option value="0" label="WMS仓储发货"></el-option>
                  <el-option value="1" label="供应商自发货"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="收货人" prop="receiverName" >
                <el-input v-model="dataForm.receiverName"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="收货人手机" prop="receiverPhone" >
                <el-input v-model="dataForm.receiverPhone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收货地址" >
                <v-distpicker
                  @selected='selectContact' :province="dataForm.receiverProvinceId" :city="dataForm.receiverCityId" :area="dataForm.receiverCountryId"></v-distpicker>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="发货时间" >
                <el-form-item prop="deliveryTimeStart">
                  <el-date-picker v-model="dataForm.deliveryTimeStart" type="datetime" placeholder="开始" style="width:175px !important"></el-date-picker>
                </el-form-item>
                <span class="dater">-</span>
                <el-form-item prop="deliveryTimeEnd">
                  <el-date-picker v-model="dataForm.deliveryTimeEnd" type="datetime" placeholder="结束" style="width:175px !important"></el-date-picker>
                </el-form-item>
              </el-form-item>
            </el-col>
          </el-row>
      </div>

      <!--表格-->
      <div class="table">
        <el-table :data="tableData" style="width: 100%" class="toolbar"
        :header-cell-style="{background:'#2F4554',color:'#FFFFFF'}" stripe>
          <el-table-column prop="id" label="行号" width="180">
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名称" width="180">
          </el-table-column>
          <el-table-column prop="goodsName" label="商品编码" width="180">
          </el-table-column>
          <el-table-column prop="specificationAttribute" label="规格属性">
          </el-table-column>
          <el-table-column prop="barCode" label="条码"> </el-table-column>
          <el-table-column prop="goodsNumber" label="货号"> </el-table-column>
          <el-table-column prop="PurchaseQuantity" label="购买数量">
          </el-table-column>
          <el-table-column prop="unit" label="计量单位">件</el-table-column>
          <el-table-column prop="quantityShipped" label="已发货数量">
          </el-table-column>
          <el-table-column prop="unshippedQuantity" label="未发货数量">
          </el-table-column>
          <el-table-column prop="quantityOfThisShipment" label="本次发货数量">
          </el-table-column>
          <el-table-column prop="deliveryWarehouse" label="发货仓库">
          </el-table-column>
          <el-table-column prop="deliverNo" label="交易单号" width="180">
          </el-table-column>
          <el-table-column prop="goodsNum" label="商品交货数量">
          </el-table-column>
        </el-table>
      </div>
      <el-row>
        <el-col :span="10" :offset="10">
          <el-button type="primary" @click="confirm('dataForm')" round size="mini">发运确认</el-button>
          <el-button @click="back" round size="mini">返回</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!--弹出框-->
    <el-dialog title="温馨提示" :visible.sync="dialogVisible" :modal-append-to-body="false" :append-to-body="true" width="30%">
      <span style="font-weight:700;font-size:20px">是否确认发货</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="queding()">确定</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >取消</el-button
        >
      </span>
    </el-dialog>

  </div>
</template>
<script>

  import VDistpicker from 'v-distpicker';
export default {
  /**
   * 导入components模块
   * **/
  components: {
    VDistpicker,
  },

  name: "OrderDeliveryDetails2",
  props: {
    currentObject: {
      type: Object
    }
  },
  data() {
    return {
      dataFormEdit:false,//Form表单是否可以修改;
      provinceData:[],
      cityData:[],
      areaData:[],
      saleCalcUnitList:[],
      dialogVisible: false,
      createTime:null,
      merchantName:"",//销售商家
      receiverProvinceName:null,
      receiverCityName:null,
      receiverRegionName:null,
      warehouseName:null,

      buyTime:null,
      deliverNo:null,
      goodsName:null,
      //配送方式下拉选项;
      mOrderDeliveryTypeOption:[
      ],


      //信息
      orderNo: "",
      externalOrderNumber: "",
      saleWays: "",
      pickerPickupTime:null,
      distributionMode: "",
      orderStatus: 0,
      seller: "",
      orderMemberAccountNumber: "",
      pickeStatus: "",
      orderTime: "",
      sellerName: "",
      picker: "",
      pickingCompletionTime: "",
      serviceOrSelfFetchingTime: "",
      deliveryStatus: "",
      totalQuantity: "",
      grossWeight: "",
      //表单中的信息
      dataForm: {
        receiverRegionId: "",
        receiverRegionName: "",
        receiverCityId: "",
        receiverCityName: "",
        receiverProvinceId: "",
        receiverProvinceName: "",
        deliverNo:"",
        receiverName: "",
        receiverPhone: "",
        address: "",
        postalCode: "",
        expressNo: "",
        region1: "",
        region2: "",
        region3: "",
//        distributor: ""
      },
      rules: {
        receiverName: [
          { required: true, message: "请输入收货人姓名", trigger: "blur" }
        ],
        receiverPhone: [
          { required: true, message: "请输入收货人手机", trigger: "blur" },
          {
            pattern: /^1[345789]\d{9}$/,
            message: "目前只支持中国大陆的手机号码"
          }
        ],
        postalCode: [
          { required: true, message: "请输入邮编", trigger: "blur" },
          { pattern: /^[0-9]{6}$/, message: "请输入正确邮编" }
        ],
        address: [
          { required: true, message: "请输入地址", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 10 到 15 个字符", trigger: "blur" }
        ],
        expressNo: [
          { required: true, message: "请输入物流单号", trigger: "blur" },
          { pattern: /^[1-9]\d*$/, message: "请输入正确物流单号" }
        ],
        region1: [
          { required: false, message: "请选择收货人地址", trigger: "change" }
        ],
        region2: [
          { required: false, message: "请选择收货人地址", trigger: "change" }
        ],
        region3: [
          { required: false, message: "请选择收货人地址", trigger: "change" }
        ],
/*        distributor: [
          { required: true, message: "请选择配送商", trigger: "change" }
        ]*/
      },
      tableData: [
        {
          lineNumber: "1",
          productName: "海淘直邮商品",
          commodityCode: "004005",
          specificationAttribute: "",
          barCode: "",
          goodsNumber: "",
          PurchaseQuantity: "1",
          unit: "录屏单位01",
          quantityShipped: "0",
          unshippedQuantity: "1",
          quantityOfThisShipment: "1",
          deliveryWarehouse: ""
        }
      ]
      ,distributorData:[]
    };
  },
  methods: {
    test () {
      console.log("-----------------111111111111");
    },
    selectOne(value){
      this.dataForm.receiverProvinceId = value.id;
      this.dataForm.receiverProvinceName = value.name;
      this.cityData = value.children;
      this.dataForm.receiverCityName = "";
      console.log(this.dataForm.receiverProvinceName + 'selectOne');
    },
    selectCity(value){
      this.dataForm.receiverCityId = value.id;
      this.dataForm.receiverCityName = value.name;
      this.areaData = value.children;
      this.dataForm.receiverRegionName = "";
      console.log(this.dataForm.receiverCityName + 'selectCity');
    },
    selectArea(value){
      this.dataForm.receiverRegionId = value.id;
      this.dataForm.receiverRegionName = value.name;
      console.log(this.dataForm.receiverRegionName + 'selectArea');
    },

    queryDeliverDetail(){
      const param= {};
      param.deliverNo = this.currentObject.deliverNo;
      this.utils.request.queryDeliverDetail(param, (res)=> {
        if(res.code === "0000") {
          this.tableData = res.data;
        }
      });
    },
    //初始化页面数据
    // init() {
    init:function () {
      this.dataForm.receiverProvinceId = this.currentObject.receiverProvinceId;
      this.dataForm.receiverProvinceName = this.currentObject.receiverProvinceName;
      this.dataForm.receiverCityId = this.currentObject.receiverCityId;
      this.dataForm.receiverCityName = this.currentObject.receiverCityName;
      this.dataForm.receiverRegionId = this.currentObject.receiverRegionId;
      this.dataForm.receiverRegionName = this.currentObject.receiverRegionName;
      this.dataForm.receiverName = this.currentObject.receiverName;
      this.dataForm.receiverPhone = this.currentObject.receiverPhone;
      this.dataForm.receiverAddress = this.currentObject.receiverAddress;
      if (this.dataForm.orderStatus === '3'){
        this.dataFormEdit = true;
      }
      const enumParam= {};
      enumParam.enumName = "com.jic.order.enums.DistributorEnum";
      this.utils.request.queryEnumList(enumParam, (res)=> {
        if(res.code === "0000") {
          this.distributorData = res.data;
        }
      });
    },

    //节流函数
    // throttle(fn, duration) {
    //   let timer = 1;
    //   return function(...args) {
    //     console.log(456);
    //     let _self = this;
    //     console.log(timer)
    //     if (!timer) {
    //     console.log(123);
    //     return;
    //     } else {
    //     console.log(456);
    //     let timer = setTimeout(() => {
    //       fn.apply(_self, args);
    //       timer = 1;
    //     }, duration);
    //     clearTimeout(timer);
    //   };
    //   };
    // },

    queding(){
      this.dataForm.deliverNo = this.currentObject.deliverNo;
      this.utils.request.confirmShip(this.dataForm, (res)=> {
        if(res.code ==="0000") {
          this.dataForm = {};
          this.dialogVisible = false;
          this.$message({message: "发运成功", type: "success"});
          this.$emit("sendChildData");
        }else{
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      });
    },
    confirm(dataForm) {
      this.$refs[dataForm].validate(vaild => {
        if (vaild) {
          console.log("成功");
          this.dialogVisible = true;
        } else {
          console.log("报错");
          this.$message({
            message: "请输入完整信息",
            type: "error"
          });
        }
      });
    },

    /***
     * 省市县联动
     * */
    selectContact(data) {
      this.dataForm.receiverProvinceId = data.province.value;
      this.dataForm.receiverCityId = data.city.value;
      this.dataForm.receiverCountryId = data.area.value
    },

    // confirmation() {
    //   let confirm = this.throttle(this.confirm, 5000);
    //   // console.log(a);
    //   confirm("dataForm");
    // },
    back() {
      this.$emit("sendChildData");
    }
  },
  mounted() {
  }
};
</script>
<style lang="scss" scoped>
.page {
  .deliveryDetails {
    background-color: #fff;
    overflow: hidden;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    .bottom {
      overflow: hidden;
      padding-top: 20px;
    }
  }
  .table {
    border: 1px solid #ccc;
    margin-bottom: 20px;
  }
  .goodsDetails {
    border: 1px solid #ccc;
    padding: 20px 0px;
    margin-bottom: 20px;
  }
}
</style>
